<script setup lang="ts">
import { onBeforeUnmount, onMounted } from 'vue';
import { RouterLink, RouterView } from 'vue-router'

// 动态设置 html 的 font-size
const setRootFontSize = () => {
  // 获取当前屏幕的宽度
  const screenWidth = window.innerWidth;

  // 设计稿宽度为 375 时设置 font-size 为 16px，其它宽度按比例缩放
  const baseWidth = 375; // 设计稿的基准宽度
  const baseFontSize = 16; // 设计稿对应的根元素字体大小

  // 计算新的 font-size
  const newFontSize = (screenWidth / baseWidth) * baseFontSize;
  // 设置 html 根元素的 font-size
  document.documentElement.style.fontSize = `${newFontSize > 32 ? 32 : newFontSize}px`;
};

onMounted(async () => {
  // 初始化时设置根元素的 font-size
  setRootFontSize();
  // 监听窗口大小变化，重新计算根元素的 font-size
  window.addEventListener('resize', setRootFontSize);
});

onBeforeUnmount(() => {
  // 在组件卸载时，移除事件监听
  window.removeEventListener('resize', setRootFontSize);
});

</script>

<template>
  <RouterView />
</template>

<style scoped>

</style>
